<template>
  <Card :dis-hover="true">
    
    <base-table :data="data" :columns="columns" @add="addHandler" 
    @update="updateHandler" @check="checkHandler" @approve="approveHandler"
    @delete="deleteHandler" ck op>
      <Select slot="select" v-model="currentSequence" style="width:200px" @on-change="selectChange">
        <Option v-for="item in sequences" :value="item.Id" :key="item.Id">{{ item.Name }}</Option>
      </Select>
    </base-table>
        <Modal
        v-model="addSelection"
        width="300"
        title="请选择您要申请的项目类型">
        <h2 class="project_type">{{currentSequenceName}}</h2>
       <div class="project_type"><Button  type="primary" ghost long @click="toPage(0)">创新训练项目</Button></div>
       <div class="project_type"><Button  type="primary" ghost long @click="toPage(1)">创业训练项目</Button></div>
       <div class="project_type"><Button  type="primary" ghost long @click="toPage(2)">创业实践项目</Button></div>
        <div slot="footer">
            <!-- <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button> -->
        </div>
    </Modal>
  </Card>
</template>

<script>
import moment from 'moment';
import { SERVER_BASE_URL, STATIS_HOST, FDS_HOST } from '@/api/config';
import BaseTable from '@c/table/table';
import qs from 'qs';
export default {
  name: 'MyProject',
  components: {
    BaseTable
  },
  data () {
    return {
      currentSequence: '',
      currentSequenceName: '',
      addSelection: false, 
      levelArray: [
        {
          key: '全国',
          value: 0
        },
        {
          key: '省级',
          value: 1
        },
        {
          key: '市级',
          value: 2
        }
      ],
      sourceArray: [
        {
          key: '科研',
          value: 0
        },
        {
          key: '其它',
          value: 1
        }
      ],
      chacterArray: [
        {
          key: '软件工程',
          value: 0
        },
        {
          key: '其它',
          value: 1
        }
      ],
      projectType: [
        {
          key: '创新训练项目',
          value: 0
        },
        {
          key: '创业训练项目',
          value: 1
        },
        {
          key: '创业实践项目',
          value: 2
        }
        
      ],
      columns: [
        { title: ' ', type: 'index', width: 50 },
        { title: '项目名称', key: 'Name', tooltip: true },
        { title: '项目编号', key: 'No' },
        {
          title: '项目类型',
          render: (h, { row }) => {
            let str = '';
            for (let k = 0; k < this.projectType.length; k++) {
              if (row['ProjectType'] === this.projectType[k].value) {
                str = this.projectType[k].key;
                break;
              }
            }
            return h('span', {}, str);
          }
        },
        { title: '项目负责人', key: 'Creater' },
        { title: '导师', key: 'TutorName' },
        
      
        {
          title: '经费',
          render: (h, { row }) => {
            return h('span', {}, `￥${row.Budget}`);
          }
        },
        { 
          title: '截止时间',
          width: 200,
          render: (h, { row }) => {
            let start = moment(row['Start']).isValid() ? moment(row['Start']).format('YYYY/MM/DD') : 'YYYY/MM/DD';
            let end = moment(row['End']).isValid() ? moment(row['End']).format('YYYY/MM/DD') : 'YYYY/MM/DD';
            return h('span', {}, `${start} 至 ${end}`);
          }
        },
        {
          title: '申报书',
          // width: 150,
          align: 'center',
          render: (h, { row }) => {
            return h('a', {
              class: {
                download: true
              },
              attrs: {
                href: STATIS_HOST + row['WordUrl'],
                download: 'download',
                target: '_blank'
              },
              on: {
                click: (event) => {
                  event.preventDefault();
                  this.DownloadDocx(row.Id);
                }
              }
            }, '下载申报材料');
          }
        }
      ],
      data: [],
      disableRepeatClick: false, // 防止表单重复提交
      sequences: []
    };
  },
  methods: {
    selectChange () {
      this.getProject(this.currentSequence);
      for (let k = 0; k < this.sequences.length; k++) {
        console.log(this.sequences[k]);
        if (this.sequences[k].Id === this.currentSequence) {
          this.currentSequenceName = this.sequences[k].Name;
          return;
        }
      }
    },
    DownloadDocx (id) {
      // console.log(id);
      this.$api.DownloadDocx({ Id: id }).then(res => {
        if (res.code === 0) {
          console.log(res);
          window.open(FDS_HOST + res.Data);
        }
      });
    },
    GetSequences () {
      this.$api.GetSequences().then(res => {
        // console.log(res.Data);
        this.sequences = res.Data;
        if (Array.isArray(this.sequences) && this.sequences.length > 0) {
          this.currentSequence = this.sequences[0].Id;
          this.currentSequenceName = this.sequences[0].Name;
          this.getProject(this.sequences[0].Id);
        } else {
          this.$Message.warning('数据异常！');
        }
      }, err => {
        if (err) {
          console.debug(err);
        }
      });
    },
    updateHandler (rows) {
      // console.log(rows);
      if (Array.isArray(rows) && rows.length === 1) {
        let to = '创新训练';
        if (rows[0]['ProjectType'] === 0) {
          to = '创新训练';
        } else if (rows[0]['ProjectType'] === 1) {
          to = '创业训练';
        } else {
          to = '创业实践';
        }
        this.$router.push({
          name: to,
          params: {
            addMode: false,
            editable: true,
            project: rows[0]
          }
        });
      } else {
        this.$Message.warning('请选择一条数据操作！');
      }
    },
    checkHandler (rows) {
      if (Array.isArray(rows) && rows.length === 1) {
        this.$router.push({
          name: '项目详情',
          params: {
            addMode: false,
            editable: false,
            project: rows[0]
          }
        });
      } else {
        this.$Message.warning('请选择一条数据操作！');
      }
    },
    approveHandler (rows) {
      if (Array.isArray(rows) && rows.length === 1) {
        this.$Modal.confirm({
          title: '操作确认',
          content: '<p>是否提交至导师审核？</p>',
          onOk: () => {
            this.$api.ProjectApprove(rows[0]).then((res) => {
              // console.log(res);
              this.getProject(this.currentSequence);
              this.$Message.success('已提交审批业务！');
            }).catch((err) => { 
              if (err) {
                this.$Message.error(err, 4);
              }
            });
          }
        });
      } else {
        this.$Message.warning('请选择一条数据操作！');
      }
    },
    deleteHandler (rows) {
      // DeleteImsProjectList
      if (Array.isArray(rows) && rows.length > 0) {
        this.$Modal.confirm({
          title: '操作确认',
          content: '删除后可能会影响其它功能使用，确认删除选中的数据吗？',
          onOk: () => {
            this.$api.DeleteImsProjectList(rows).then((res) => {
              this.$Message.success('操作成功！');
              this.getProject();
            }).catch((err) => {
              if (err) {
                this.$Message.error(err);
              }
            });
          }
        });
      } else {
        this.$Message.warning('请选择至少一条数据操作！');
      }
    },
    addHandler () {
      // console.log('add');
      this.addSelection = true;
      // this.$Modal.
      // console.log('add');
      // this.$router.push({
      //   name: '项目详情',
      //   params: {
      //     addMode: true,
      //     editable: true
      //   }
      // });
      // this.$router.push({
      //   name: '项目详情',
      //   params: {
      //     addMode: true,
      //     editable: true
      //   }
      // });
    },
    toPage (flag) {
      switch (flag) {
      case 0:
        this.$router.push({
          name: '创新训练',
          params: {
            addMode: true,
            editable: true,
            sequence: this.currentSequence
          }
        });
        break;
      case 1:
        this.$router.push({
          name: '创业训练',
          params: {
            addMode: true,
            editable: true,
            sequence: this.currentSequence
          }
        });
        break;
      case 2:
        this.$router.push({
          name: '创业实践',
          params: {
            addMode: true,
            editable: true,
            sequence: this.currentSequence
          }
        });
        break;
      default:
      }
    },
    getProject (id) {
      this.$api.GetProjectBySequence(id).then((res) => {
        if (Array.isArray(res.Data) && res.Data.length > 0) {
          this.data = res.Data;
        } else {
          this.data = [];
        }
      }).catch((err) => {
        if (err) {
          this.$Message.error(err, 4);
        }
      });
    }
  },
  mounted () {
    this.GetSequences();
    // this.getProject();
  }
};
</script>

<style >
.project_type {
  margin: 5px;
}
.download {
  cursor: pointer;
}
.download:hover {
  text-decoration: underline;
}
</style>